<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{inputVal}}</h1>
        <input type="text" v-model="inputVal" id="">
        <!-- 单个 checkbox 情况 -->
       
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>

        <!-- 多个checkbox情况 -->
        <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="john" value="john" v-model="checkedNames">
        <label for="john">john</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>

    </div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            inputVal : '',
            checked : '',
            checkedNames:[],

        }




    });
</script>
</html>